{% if each_output.output_type == 'output_spacer' %}
  {% include 'pages/output_spacer.html' %}
{% else %}

<form method="post" action="/output">
  {{form_mod_output.csrf_token}}
  {{form_mod_output.output_id(class_='form-control', value=each_output.unique_id)}}
  {{form_mod_output.output_pin(class_='form-control', value=each_output.pin)}}

  {% set form = form_mod_output %}
  {% set dict_options = dict_outputs[each_output.output_type] %}
  {% set each_device = each_output %}
  {% set unique_id = each_output.unique_id %}
  {% set custom_options_values = custom_options_values_outputs %}

  <div class="grid-stack-item-content">

    <div class="row small-gutters" style="border: 1px solid #ddd; border-radius: 5px 5px 0 0; padding: 2px 4px 2px 4px;">
      <div class="col-1 text-center icon-fh my-auto panel-heading">
        <i style="font-size: 2em" class="fa fa-grip-horizontal" title="{{_('Drag')}}"></i>
      </div>
      <div class="col-1 text-center icon-fh my-auto">
        <a class="btn" style="border-color: transparent; padding: 0" data-toggle="modal" data-target="#modal_config_{{each_output.unique_id}}">
          <i style="font-size: 1.5em" class="fas fa-cog" title="{{_('Configure')}}"></i>
        </a>
      </div>
      <div class="col-4">
        <input id="output_name_{{each_output.unique_id}}" class="form-control" disabled="" value="{{each_output.name}}" type="text">
      </div>
      <div class="col-6">
        <input class="form-control" disabled="" value="{% if each_output.interface %}[{{each_output.interface}}] {% endif %}{{dict_outputs[each_output.output_type]['output_name']}}{% if dict_outputs[each_output.output_type]['output_library'] %} ({{dict_outputs[each_output.output_type]['output_library']}}){% endif %}" type="text">
      </div>
    </div>

    {% for each_output_channel in dict_outputs[each_output.output_type]['channels_dict'] %}
    <div class="item_channel row small-gutters pause-background" style="border: 1px solid #ddd; {% if loop.last %}border-radius: 0 0 5px 5px;{% endif %} padding: 5px 4px 5px 4px;" id="{{each_output.unique_id}}-{{each_output_channel}}-output-state">
      <div class="col-4">
        <input class="form-control" disabled="" value="CH{{each_output_channel}}
      {%- if 'name' in custom_options_values_output_channels[each_output.unique_id][each_output_channel] and
             custom_options_values_output_channels[each_output.unique_id][each_output_channel]['name'] -%}
        {{': ' + custom_options_values_output_channels[each_output.unique_id][each_output_channel]['name']}}
      {%- elif 'name' in dict_outputs[each_output.output_type]['channels_dict'][each_output_channel] -%}
        {{': ' + dict_outputs[each_output.output_type]['channels_dict'][each_output_channel]['name']}}
      {%- endif -%}
        " type="text">
      </div>
      <div class="col-4">
        <input class="form-control btn btn-primary btn-sm btn-block pause-background" type="button" onclick="setClipboard('{{each_output.unique_id}}')" id="{{each_output.unique_id}}-{{each_output_channel}}-input-output-state" title="[{{'%02d' % each_output.id}}] UUID: {{each_output.unique_id}}, {{dict_translation['copy_to_clipboard']['phrase']}}" value="{{ _('Unconfigured')}}">
      </div>
      {% if 'button_on' in dict_options['options_enabled'] -%}
      <div class="col-2">
        <input onclick="return $(this).turn_on(this, '{{each_output.unique_id}}', '{{each_output_channel}}');" class="form-control btn btn-primary btn-success btn-block turn_on" name="{{each_output.unique_id}}/{{each_output_channel}}/on/sec/0" type="button" value="{{dict_translation['on']['title']}}">
      </div>
      {%- endif %}
      <div class="{% if 'button_on' in dict_options['options_enabled'] -%}col-2{% else %}col-4{% endif %}">
        <input onclick="return $(this).turn_off(this, '{{each_output.unique_id}}', '{{each_output_channel}}');" class="form-control btn btn-primary btn-danger btn-block turn_off" name="{{each_output.unique_id}}/{{each_output_channel}}/off/sec/0" type="button" value="{{dict_translation['off']['title']}}">
      </div>
    </div>
    {% endfor %}

  </div> <!-- grid-stack-item-content -->

</form>

<div class="modal fade" id="modal_config_{{each_output.unique_id}}" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content" style="padding: 1em">
      <div class="modal-header">
        <h5 class="modal-title">Output Configuration{% if each_output.output_type in dict_outputs %}: {{dict_outputs[each_output.output_type]['output_name']}}{% endif %}</h5>
      </div>
      {% include 'pages/output_options.html' %}
    </div>
  </div>
</div>

{% endif %}
